<template>
  <el-dialog  class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="字段名称" prop="fieldName">
          <el-input v-model="formData.fieldName" placeholder="请输入字段名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="引用字段" prop="citeField">
          <el-input v-model="formData.citeField" placeholder="请输入引用字段" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="字段类型" prop="fieldType">
          <el-select v-model="formData.fieldType" placeholder="请选择字段类型" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in fieldTypeOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="formData.description" type="textarea" placeholder="请输入描述信息"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    title:{
      type:String,
      default(){
        return '编辑'
      }
    },
  },
  data() {
    return {
      isOpen:false,
      formData: {
        fieldName: undefined,
        citeField: undefined,
        fieldType: undefined,
        description: undefined
      },
      rules: {
        fieldName: [{
          required: true,
          message: '请输入字段名称',
          trigger: 'blur'
        }],
        citeField: [{
          required: true,
          message: '请输入引用字段',
          trigger: 'blur'
        }],
        fieldType: [{
          required: true,
          message: '请选择字段类型',
          trigger: 'change'
        }],
        description: [{
          required: true,
          message: '请输入描述信息',
          trigger: 'blur'
        }]
      },
      fieldTypeOptions: [{
        'label': '描述信息',
        'value': 1
      }, {
        'label': 'UUID',
        'value': 2
      }, {
        'label': '应用层协议',
        'value': 3
      }, {
        'label': '行为树编码',
        'value': 4
      }, {
        'label': '登录方式',
        'value': 5
      }, {
        'label': '日志行为类型',
        'value': 6
      }, {
        'label': '日志产品类型',
        'value': 7
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.isOpen=false
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    }
  }
}

</script>
<style scoped>
.el-dialog{z-index:3000}
</style>
